<template>
  <div class="person">
    <h2>一辆{{car.brand}}车,价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车价格</button>
    <br>
    <h2>游戏列表</h2>
    <ul>
      <li v-for="item in games" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="changeGameName">修改第二个游戏的名称</button>
    <hr>
    <h2>测试：{{ a.b.c }}</h2>
    <button @click="changeObj">测试</button>
  </div>
</template>
<script setup name="YeNan">
import {reactive} from 'vue'
let car = reactive({brand:'奔驰',price:100})  //{brand:'奔驰',price:100}为原对象，经过reactive包裹生成的对象变成了响应式对象
console.log('car',car);  //car是一个Proxy 函数的实例对象，主要数据存在[[Target]]中

let games = reactive([
  {
    id:'123',name:'王者荣耀'
  },{
    id:'456',name:'英雌联盟'
  },{
    id:'789',name:'原神启动'
  },
])
console.log('games',games);

function changePrice(){
  // reactive创建的对象类型的数据，在更改其属性的值时不用像ref那样xxx.value，可以直接object.key = xxx
  car.price +=10
  console.log('price',car.price);
  
}
function changeGameName(){
  games[1].name = '地下城与勇士'
}

// reactive处理的对象类型的数据是深层次的响应式
let a = reactive({
  b:{
    c:'666'
  }
})
function changeObj(){
  a.b.c = 999 
}
</script>

<style>
button {
  margin-left: 10px;
}
</style>